//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

@mixin progress-bar() {
    /* ==========================================================================
       Progress bar

       Default Mendix progress bar widget.
    ========================================================================== */

    .progress {
        overflow: hidden;
        display: flex;
        flex-direction: row;
    }

    .progress-bar {
        align-self: flex-start;
        width: 0;
        height: 100%;
        transition: width 0.6s ease;
        text-align: center;
        color: #ffffff;
        border-radius: $border-radius-default;
        font-weight: $font-weight-semibold;
    }

    .progress-striped .progress-bar,
    .progress-bar-striped {
        background-image: linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.15) 75%,
            transparent 75%,
            transparent
        );
        background-size: 40px 40px;
    }

    .widget-progress-bar.active .progress-bar,
    .progress.active .progress-bar,
    .progress-bar.active {
        animation: progress-bar-stripes 2s linear infinite;
    }

    @keyframes progress-bar-stripes {
        from {
            background-position: 40px 0;
        }
        to {
            background-position: 0 0;
        }
    }
}
